<script setup lang="ts">
import ExamBasicPanel from './ExamBasicPanel.vue'
import ExamQuestionList from './ExamQuestionList.vue'
import ExamScoreTable from './ExamScoreTable.vue'

defineOptions({
  name: 'ExamDetail',
})

const activeKey = ref('1')
const dataId = ref()

const onChange = (key: string) => {
  activeKey.value = key
}

const route = useRoute()
onMounted(() => {
  dataId.value = route.query.id as string
})
defineExpose({ open })
</script>

<template>
  <ProPage>
    <ExamBasicPanel :exam-id="dataId" />
    <a-tabs :active-key="activeKey" lazy-load @change="onChange">
      <a-tab-pane key="1" title="题目列表">
        <ExamQuestionList v-if="activeKey === '1'" :exam-id="dataId" />
      </a-tab-pane>
      <a-tab-pane key="2" title="成绩册">
        <ExamScoreTable v-if="activeKey === '2'" :exam-id="dataId" />
      </a-tab-pane>
    </a-tabs>
  </ProPage>
</template>

<style lang="less" scoped>
:deep(.arco-card-header) {
  padding: 0;
}
:deep(.arco-page-header) {
  padding: 10px 0;
}
</style>
